<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Form表单的学习</title>
</head>
<body>
	<form id="my-form" method="post">
		<input type="text" size="30" ></br>
		<textarea rows="4" cols="30">请输入今天的心情</textarea></br>
		<select id="select-list" multiple='multiple'>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</form>
	<iframe src="riched.html" name="richedit" style="height: 100px;width: 300px;"></iframe>
	<div id="rich-div" contenteditable style="width: 100px;height: 200px;"></div>
	<script type="text/javascript" src="../Code/event.js"></script>
	<script type="text/javascript" src="../Code/form.js"></script>
	<script type="text/javascript">
	//将iframe中页面变为富文本编辑器
	EventUtil.addHandler(window, "load", function () {
		frames["richedit"].document.designMode = "on";
	})
	//focus,blur,change事件。change事件：对于input和textarea，在他们失去焦点且value值改变时触发，select其选项改变时触发
	var textBox = document.forms[0].elements[0];
	var textAreaBox = textBox.nextElementSibling;
	console.log(textAreaBox);
	EventUtil.addHandler(textBox,"focus",function (event) {
		var event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		if (target.style.backgroundColor !== "pink") {
			target.style.backgroundColor = "#eeeeee";
		}
	});
	EventUtil.addHandler(textBox, "blur", function (event) {
		var event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		if (/[^\d]/.test(target.value)) {
			target.style.backgroundColor = "pink";
		} else {
			target.style.backgroundColor = "";
		}
	});
	EventUtil.addHandler(textBox, "change", function (event) {
		var event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		if (/[^\d]/.test(target.value)) {
			target.style.backgroundColor = "pink";
		} else {
			target.style.backgroundColor = "";
		}
	});
	//select()方法选择文本框中的所有文本
	EventUtil.addHandler(textAreaBox,"focus", function (event) {
		event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		target.select();
	});
	//测试selectText()
	textBox.value = "Hello world!";
	selectText(textBox,0,textBox.value.length);
	selectText(textBox,0,3);

	//屏蔽所有按键操作
	/*EventUtil.addHandler(textAreaBox,"keypress", function(event) {
		event = EventUtil.getEvent(event);
		EventUtil.preventDefault(event);
	})*/
	//只允许用户输入数值
	EventUtil.addHandler(textAreaBox, "keypress", function (event) {
		event = EventUtil.getEvent(event);
		var target = EventUtil.getTarget(event);
		var charCode = EventUtil.getCharCode(event);

		if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && ! event.ctrlKey ) {
			EventUtil.preventDefault(event);
		};
	})
	</script>

</body>
</html>